<script setup>
import { onMounted, ref, watch } from "vue";
const sectionsArr = ref([
  {
    id: "6-t",
    title: "6T",
  },
  {
    id: "5-t",
    title: "5T",
  },
  {
    id: "4-t",
    title: "4T",
  },
  {
    id: "3-t",
    title: "3T",
  },
  {
    id: "2-t",
    title: "2T",
  },
  {
    id: "1-t",
    title: "1T",
  },
]);
const seelctedId = ref('');
function singleSelectSection(v) {
  if(!v.id) { return }
  seelctedId.value = v.id;
}
watch();
onMounted(() => {});
</script>

<template>
  <div class="tools-section">
    <div
      class="tools-section-item"
      :class="[
        seelctedId === item.id? 'active': ''
      ]"
      v-for="(item, index) in sectionsArr"
      @click="singleSelectSection(item)"
      :key="index"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<style scoped lang="less">
.tools-section {
  position: fixed;
  top: 100px;
  right: 50px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  & > .tools-section-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 30px;
    height: 40px;
    background-color: rgba(200,0,0,0.2);
    &:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    &:last-child{
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &.active {
      border: 1px solid red;
    }
  }
}
</style>
